/*
* @Author: zhangsai
* @Date: 2018/1/16
* @Last Modified by: zhangsai
* @Last Modified time: 2018/1/16
* @description: 文件列表
*/
<template>
    <div>
        <div class="ca-file-main ca-box ca-p-22" v-loading.body="fullLoading">
            <div class="ca-title">
                <el-row>
                    <div class="pull-left ca-m-r-20"><h3>{{title}}</h3></div>
                    <div class="pull-left ca-m-r-20" v-if="isShowFileChildType">
                        <el-select v-model="params.fileChildType" @change="getFileList">
                            <el-option key="全部" label="全部" value=""></el-option>
                            <el-option  v-for="(type, index) in fileChildTypeList"
                                        :key="index"
                                        :value="type.id"
                                        :label="type.cnName"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="pull-left ca-m-r-20" v-if="isShowSearch">
                        <el-input placeholder="请输入关键词,支持模糊查询" v-model="params.fileName">
                            <el-button slot="append" icon="el-icon-search" @click="getFileList" ></el-button>
                        </el-input>
                    </div>
                    <div  class="pull-right">
                        <div class="ca-inline-block ca-m-r-10 ">
                            <csUploadBtn
                               :fileType="this.fileType"
                               :businessId="this.businessId"
                               :industryId="this.industryId"
                               :isShowFileChildType="isShowFileChildType"
                               uploadType="all"
                               @getFileList="clearDefaultInfo"
                               :getFileUploadedReturnData="getFileUploadedReturnDataFun"
                            ></csUploadBtn>
                        </div>
                        <el-button v-if="isEditSaveBtn" type="primary" size="medium" @click="cancel">保存</el-button>
                        <el-button v-if="isEditCancelBtn" type="default" size="medium" @click="cancel">取消</el-button>
                    </div>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <slot></slot>
                    </el-col>
                </el-row>
            </div>
            <div class="ca-file-ul">
            <el-row class="ca-file-row" :gutter="20" v-for="(file, index) in fileList.resultData" :key="index">
                <el-col :span="4" class="upload-time">{{file.uploadTime|moment('YYYY-MM-DD')}}</el-col>
                <el-col :span="1">
                    <tz-icon-file-type class="ca-m-r-5" :fileType="file.fileName"></tz-icon-file-type>
                </el-col>
                <el-col :span="8">
                    <div class="ca-text-over-flow-ellipsis"
                         @click="previewFileCheck(file.id, file.fileName)">
                        <span class="ca-font-size-16 ca-pointer">{{file.fileName}}</span>
                    </div>
                </el-col>
                <el-col :span="4" v-if="isShowFileChildType">
                    <div class="ca-text-over-flow-ellipsis">{{file.fileChildName}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="ca-text-over-flow-ellipsis">{{file.uploadUserName}}</div>
                </el-col>
                <el-col :span="3" class="ca-pull-right ca-align-right">
                    <a class="ca-download ca-m-r-10" @click="downloadFile(file.id)"></a>
                    <el-button class="ca-table-btn" @click="deleteFile(file.id)">
                        <i class="fa fa-times"></i>
                    </el-button>
                </el-col>
            </el-row>
            <div class="ca-align-right">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="params.pageIndex"
                    :page-size="params.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="fileList.totalCount">
                </el-pagination>
            </div>
        </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import mined from './mixin';
    export default {
        mixins: [mined],
        data() {
            return {

            }
        },
        watch: {
            fileType: function (val) {
                this.fileType = val
                this.params.fileType = val
                this.getFileList()
            }
        },
        props: {
            title: {
                type: String,
                default() {
                    return '';
                }
            },
            // 文件类型
            fileType: {
                type: String,
                default() {
                    return '';
                }
            },
            fileChildType: {
                type: String,
                default() {
                    return '';
                }
            },
            // 业务id
            businessId: {
                type: String,
                default() {
                    return '';
                }
            },
            // 行业id
            industryId: {
                type: String,
                default() {
                    return '';
                }
            },
            // 是否显示搜索框
            isShowSearch: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否显示文件类型
            isShowFileChildType: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否显示编辑页的取消按钮isEditSaveBtn
            isEditCancelBtn: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否显示编辑页的保存按钮
            isEditSaveBtn: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否显示编辑按钮
            isFileEdit: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否显示工具栏(包括下拉框、搜索框、编辑按钮)
            isAllToolbar: {
                type: Boolean,
                default() {
                    return true
                }
            },
            //文件成功返回的数据
            getFileUploadedReturnData: { //有一个参数 fileList
                type: Function,
                default: function () {}
            },
            //删除文件的id
            deleteFileId: {
                type: Function,
                default: function () {}
            }
        },
        mounted() {
            this.params = {
                ...this.params,
                fileType: this.fileType,
                fileChildType: this.fileChildType,
                businessId: this.businessId,
                industryId: this.industryId,
            };
            this.getDefaultInfo();
        },
        methods: {
            //文件成功返回的数据
            getFileUploadedReturnDataFun(arr) {//调用父组件的方法
                this.getFileUploadedReturnData(arr)
            },
            // 切换回index
            cancel() {
                this.$emit('cancel');
                this.$emit('getList')
            },
            clearDefaultInfo() {
                this.params.fileChildType = '';
                this.getDefaultInfo();
            }
        },
        components: {
            'csUploadBtn': require('../upload-btn'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
